<template>
  <div class="mui-content fee-card" @click="closeSheet" @scroll="scrolls" :style="{height: `${scrollHeight}px`}">
    <div class="mui-control-content mui-active">
      <transition-group name="list">
        <div class="mui-card radius"
          :class="{disabled: v.is_ok}"
          v-for="(v, k) in feeList" :key="v.id" 
          @click="updateBill(v.id)"
        >
          <div class="mui-card-header mui-card-media">
            <div class="mui-media-body mg-0">
              <img :src="v.image" class="my-icon">
              <span class="title">{{v.name}}</span>
              <span class="sub-title">{{v.card_type}}</span>
              <span class="sub-title">{{v.card_no}}</span>
              <span class="sub-title">|</span>
              <span class="sub-title">{{v.owner}}</span>
              <img class="cooperation-icon" src="/src/assets/icons/set.png" alt="操作" @click.stop="actionSheet(v.id, k)">
            </div>
          </div>
          <div class="mui-card-popup" :class="{show: v.id === cardId}">
            <div class="popup-item" @click.stop="editHandle(v.id)">编辑</div>
            <div class="popup-item" @click.stop="delHandle(v.id)">删除</div>
            <div class="popup-item" @click.stop="hideCard(v.id)">隐藏</div>
          </div>
          <div class="mui-card-content">
            <div class="mui-card-content-inner flex">
              <div class="flex-item short">
                <p>年费日：</p>
                <p class="word-no-link">{{v.fee_date}}</p>
              </div>
              <div class="flex-item long">
                <div class="right-word-black">
                  <p class="normal">年费规则：</p>
                  <p class="middle">{{v.rule}}</p>
                </div>
              </div>
            </div>
          </div>
          <img v-if="v.is_ok" class="complete-image" src="/src/assets/icons/complete-fee.png">
        </div>
      </transition-group>
      <div class="mui-card radius mui-card-btn" @click="toAddCard">
        <img src="/src/assets/icons/add.png">
        <span class="card-btn">增加卡片</span>
      </div>
    </div>
  </div>
</template>
<script>
import {MessageBox, Toast} from 'Mint-ui'

export default {
  name: 'MyFeeCard',
  data () {
    return {
      feeList: [],
      page: 1,
      limit: 100,
      owner: -1,
      bank_id: [],
      cardId: 0,
      listIndex: '',
      scrollHeight: 0
    }
  },
  methods: {
    getFeeList () {
      this.closeSheet()
      let params = {
        page: this.page,
        limit: this.limit,
        owner: this.owner,
        bank_id: this.bank_id
      }
      // post请求
      this.$post('/vue/card/get_annual_fee_list', params).then(data => {
        this.feeList = data
      })
    },
    actionSheet (cid, index) {
      if (this.cardId === cid) {
        this.cardId = 0
        this.listIndex = ''
      } else {
        this.cardId = cid
        this.listIndex = index
      }
    },
    closeSheet () {
      this.cardId = 0
    },
    toAddCard () {
      this.$router.push({name: 'AddCard'})
    },
    editHandle (id) {
      this.$router.push({name: 'EditCard', params: {id: id}})
    },
    delHandle (id) {
      this.closeSheet()
      let params = {id: id}
      this.$post('/vue/card/card_del', params).then(data => {
        msg(data)
        this.feeList.splice(this.listIndex, 1)
      })
    },
    updateBill (id) {
      this.closeSheet()
      id = parseInt(id)
      let params = {id: id}
      // 查询ID判断is_ok
      let tmpIsOk = ''
      let tmpIndex = ''
      for (let i = 0; i < this.feeList.length; i++) {
        if (parseInt(this.feeList[i].id) === parseInt(id)) {
          tmpIndex = i
          tmpIsOk = this.feeList[i].is_ok
          break
        }
      }
      params.is_ok = Number(!tmpIsOk)
      if (tmpIsOk) {
        MessageBox.alert('', {
          message: '修改年费状态',
          title: '提示',
          confirmButtonText: '未达标',
          closeOnClickModal: true
        }).then(action => {
          if (action === 'confirm') {
            this.$post('/vue/card/is_ok', params).then(res => {
              msg('修改成功')
              this.feeList[tmpIndex].is_ok = !tmpIsOk
            })
          }
        })
      } else {
        MessageBox.alert('', {
          message: '修改年费状态',
          title: '提示',
          confirmButtonText: '已达标',
          closeOnClickModal: true
        }).then(action => {
          if (action === 'confirm') {
            this.$post('/vue/card/is_ok', params).then(res => {
              msg('修改成功')
              this.feeList[tmpIndex].is_ok = !tmpIsOk
            })
          }
        })
      }
    },
    inArray (arr, val) {
      for (let i = 0; i < arr.length; i++) {
        if (val === arr[i]) {
          return i
        }
      }
      return false
    },
    scrolls (e) {
      document.querySelector('.pb-70').scrollTop = e.target.scrollTop
    }
  },
  mounted () {
    this.getFeeList()
    this.scrollHeight = document.documentElement.clientHeight - 106
  }
}
const msg = (msg) => {
  Toast({
    message: msg,
    position: 'bottom',
    duration: 2000
  })
}
</script>
<style lang="less">
</style>